<template>
	<div class="finance">
		<div class="finance_banner">
			<img src="../../../../static/img/images/wd_ewm1.jpg" />
		</div>
		<div class="finance_top flex align_center" @click="jump2">
			<span class="finance_top_left">账户管理</span>
			<span class="finance_top_right flex1">银行账号增减</span>
			<i class="el-icon-arrow-right"></i>
		</div>
		<div class="finance_body clear2">
			<div class="finance_body_Div" v-for="(data,key) in order_data" @click="jump(data.url,key)">
				<div class="finance_body_DivTitle">
					{{data.title}}
					<i class="el-icon-caret-right"></i>
				</div>
				<div class="finance_body_DivText">
					<p class="finance_body_DivP1">{{data.num}}</p>
					<p class="finance_body_DivP2">{{data.text}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				order_data:[{
					'title':'收入明细',
					'num':'5.00',
					'text':'收入金额',
					'url':'orderData',
				},{
					'title':'支出明细',
					'num':'4.00',
					'text':'支出金额',
					'url':'orderData',
				},{
					'title':'余额提现',
					'num':'3.00',
					'text':'可提金额',
					'url':'orderData2',
				},{
					'title':'匠子账单',
					'num':'2.00',
					'text':'匠子余额',
					'url':'orderData',
				},{
					'title':'匠幂账单',
					'num':'1.00',
					'text':'匠幂余额',
					'url':'orderData',
				},{
					'title':'卡卷票根',
					'num':'0',
					'text':'卡卷数量',
					'url':'orderData',
				}]
			}
		},
		mounted() {
			this.dataList();
		},
		methods: {
			dataList(){
				const loading=this.$loading({
		          lock: true,
		          text: '加载中',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.ajax(this, {
					'url': this.defines.get_member_balance,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},

					'callback': data => {
						if(data.data.error_code==0) {
							console.log(data);
							let html_data=data.data.data;
							for(let i in this.order_data){
								switch(this.order_data[i].text){
									case '收入金额':
										this.$set(this.order_data[i],'num',html_data.all_income)
										break;
									case '支出金额':
										this.$set(this.order_data[i],'num',html_data.all_outcome)
										break;
									case '可提金额':
										this.$set(this.order_data[i],'num',html_data.all_withdrawals)
										break;
									case '匠子余额':
										this.$set(this.order_data[i],'num',html_data.child_balance)
										break;
									case '匠幂余额':
										this.$set(this.order_data[i],'num',html_data.power_balance)
										break;
									
								}
							}
							
							loading.close();	

						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			jump(url,key){
				if(key == 5){
					return false;
				}
				this.$router.push({
        			path: '/wode/'+url,
        			query:{
        				'type':key,
        			}
				})
            	
            },
            jump2(){
            	this.$router.push({
        			path: '/wode/ordercard',
				})
            }
		}
	}
</script>

<style scoped>
	.finance_banner{
		width: 100%;
		background: #000000;
	}
	.finance_banner img{
		width: 100%;
		display: block;
	}
	.finance_top{
		width: 92%;
		padding: 0 4%;
		height: 5rem;
		border-bottom: 0.1rem solid #1b1a1f;
	}
	.finance_top_left{
		font-size: 1.7rem;
		color: #000;
	}
	.finance_top_right{
		font-size: 1.5rem;
		color: #cccccc;
		text-align: right;
	}
	.finance_top i{
		font-size: 1.7rem;
		font-weight: bold;
	}
	.finance_body{
		width: 92%;
		padding: 0 4%;
		padding-top: 1.5rem;
	}
	.finance_body_Div{
		width: 32%;
		float: left;
		box-sizing: border-box;
		margin-bottom: 2%;
	}
	.finance_body_Div:nth-child(3n-1){
		margin: 0 2% 2% 2%;
	}
	.finance_body_DivTitle{
		width: 100%;
		background: #000;
		color: #fff;
		font-size: 1.4rem;
		height: 4rem;
		text-align: center;
		line-height: 4rem;
		position: relative;
		border-top-left-radius:0.4rem ;
		border-top-right-radius:0.4rem ;
	}
	.finance_body_DivTitle i{
		font-size: 1.3rem;
		color: #f7bd40;
		position: absolute;
		top: 50%;
		height: 1.5rem;
		line-height: 1.5rem;
		margin-top: -0.65rem;
		right: 5%;
	}
	.finance_body_DivText{
		border-bottom-left-radius:0.4rem ;
		border-bottom-right-radius:0.4rem ;
		border: 0.1rem solid #000;
		border-top: 0;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 2rem 0;
	}
	.finance_body_DivP1{
		font-size: 1.4rem;
		line-height: 1.5rem;
		margin-bottom: 0.5rem;
	}
	.finance_body_DivP2{
		font-size: 1.2rem;
		line-height: 1.3rem;
	}
</style>